<template>
<div class='system'>
  <table border="1">
    <thead>
      <th>项目</th>
      <th>内容</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <span>网站网址:</span>
        </td>
        <td>
          <Input v-model="input1" placeholder="请输入网站" style="width:450px" size="large" />
        </td>
      </tr>
      <tr>
        <td>
          <span>网站名称:</span>
        </td>
        <td>
          <Input v-model="input2" placeholder="请输入网站" style="width:450px" size="large" />
        </td>
      </tr>
      <tr>
        <td>
          <span>网站logo:</span>
        </td>
        <td>
          <Input v-model="name" disabled placeholder="请输入网站" style="width:450px; margin-left: 65px;" size="large" multiple />
          <Upload type="drag"
                  name="imgs"
                  multiple
                  :action="uploadUri"
                  :on-success="handleUploadSuccess"
                  :with-credentials="true"
                  :headers="headers"
                  :default-file-list="imgList"
                  :format="['jpg','jpeg','png','gif']">
            <Button type="warning" size="large">上传</Button>
          </Upload>
        </td>
      </tr>

      <tr>
        <td>
          <span>网站邮箱:</span>
        </td>
        <td>
          <Input v-model="input3" placeholder="请输入网站" style="width:450px;" size="large" />
        </td>
      </tr>

      <tr>
        <td>
          <span>网站备案号:</span>
        </td>
        <td>
          <Input v-model="input4" placeholder="请输入网站" style="width:450px" size="large" />
        </td>
      </tr>

      <tr>
        <td>
          <span>网站电话:</span>

        </td>
        <td>
          <Input v-model="input5" placeholder="请输入网站" style="width:450px" size="large" />
        </td>
      </tr>

      <tr>
        <td>
          <span>版权信息:</span>
        </td>
        <td>
          <Input v-model="input6" placeholder="请输入网站" style="width:450px" size="large" />
        </td>
      </tr>

    </tbody>

  </table>
  <Button type="primary" size="large" class="btn" style="width:450px" @click="UpdateSystemInfo">保存</Button>
</div>
</template>

<script>
import conf from '@/api/apiConf'
export default {
  name: 'system',
  data: () => ({
    uploadUri:conf.uploadFile, //后台上传图片地址
    headers:{'Access-Control-Allow-Origin':'*'},
    imgList:[],
    name: '',
    input1: '',
    input2: '',
    input3: '',
    input4: '',
    input5: '',
    input6: '',
  }),
  created() {
    this.loog()
  },
  methods: {
    fileName(file) {
      this.name = file.name
    },
    async loog() {
      const res = await this.$http.get(conf.getSystemInfo)
      if (res.data.status != 200) return this.$Message.warning('获取网站信息失败')
      console.log(res)
      this.input1 = res.data.data.systemAddress
      this.input2 = res.data.data.systemName
      this.name = res.data.data.systemLogo
      this.input3 = res.data.data.systemEmail
      this.input4 = res.data.data.systemRecordNo
      this.input5 = res.data.data.systemPhone
      this.input6 = res.data.data.systemRight
    },
    async UpdateSystemInfo() {
      let params = new URLSearchParams()
      params.append('systemAddress', this.input1)
      params.append('systemName', this.input2)
      params.append('systemLogo', this.name)
      params.append('systemEmail', this.input3)
      params.append('systemRecordNo', this.input4)
      params.append('systemPhone', this.input5)
      params.append('systemRight', this.input6)
      const res = await this.$http.post(conf.UpdateSystemInfo, params)
      console.log(res.data)
      if (res.data.status != 200) return this.$Message.warning('修改失败')
      this.$Message.success('修改成功')
    },
    handleUploadSuccess(file){
      //获取当前网页的完整地址
     var url = window.location.href;
     var urlstr = url.split("/"); //以“/”进行分割
     var urls = '';
     if (urlstr[2]) {
         urls = urlstr[0]+'//'+urlstr[2];
     }
     if(urls.search(':')>0){
       urlstr=urls.split(":")
       urls=urlstr[0]+":"+urlstr[1]
     }
       url =urls+ file.data.path.replace('public','/mogu');
       console.log(url);
       this.name=url
       this.imgList.push({
        name: this.getFileName(url),
        url: url
        })
    },
    getFileName(path){
      var pos1 = path.lastIndexOf('/');
      var pos2 = path.lastIndexOf('\\');
      var pos  = Math.max(pos1, pos2)
      if( pos<0 ) return path;
      return path.substring(pos+1);
    },
    
  },
}
</script>

<style lang="less" scoped>
.system {
  .btn {
    margin: 0 300px;
  }

  table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border: 1px solid #cccccc;
    margin-bottom: 30px;

    th {
      background: #2d8cf0;
      color: #ffffff;
      font-size: 20px;
      height: 70px;
    }

    tr {
      padding: 10px 0px;
      text-align: center;
      font-size: 16px;
      color: #000;

      td {
        width: 200px;
      }
    }
  }

  width: 100%;
  height: 100%;
  background: #ffffff;

  .ivu-upload {
    display: inline-block;
    margin-left: 10px;
  }

  span {
    margin-right: 20px;
    font-size: 17px;
    color: #000;
  }
}

.ivu-upload-list {
  display: none;
}
</style>
